<template>
	<view class="title-name">
		<image v-if="backShow" src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/back-arrow.png" mode=""></image>
		<view class="name">{{name}}</view>
		<view class="mask" @click="back" v-if="backShow">
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "titleName",
		props: {
			name: {
				require: true
			},
			backShow: {
				require: false,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			back() {
				uni.navigateBack()

			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-name {
		width: 100vw;


		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.name {

			font-weight: 500;
			font-size: 35rpx;
			color: #FFFFFF;

		}

		.mask {
			position: absolute;
			top: 86rpx;
			width: 65rpx;
			height: 40rpx;
			left: -300rpx;
			display: inline-block;
			// background-color: red;

		}

		image {
			width: 23rpx;
			height: 38rpx;
			position: absolute;
			left: 36rpx;
			top: 86rpx;
		}

		view {
			font-size: 38rpx;
			font-weight: bold;
			color: #333333;
			position: absolute;
			top: 78rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			z-index: 99999;
			width: calc(100vw - 300rpx);
			text-align: center
		}
	}
</style>